<template>
  <div>
    <!-- 用户信息 -->
    <el-row type="flex" justify="space-between">
      <el-col :span="6">
        <div class="user">商户名称</div>
      </el-col>
      <el-col :span="6">
        <div class="name" style="margin-left:-60px">{{userMessage.businessName}}</div>
      </el-col>
      <el-col :span="6">
        <div class="user">地址</div>
      </el-col>
      <el-col :span="6">
        <div class="name" style="margin-left:-90px">{{userMessage.businessAddress}}</div>
      </el-col>
    </el-row>
    <!-- 用户内容 -->
    <el-row style="margin-top:20px">
      <el-col :span="4">
        <div class="user">服务内容</div>
      </el-col>
      <el-col :span="20">
        <div class="name" style="margin-left:-20px">{{userMessage.businessIntroduced}}</div>
      </el-col>
    </el-row>

    <!-- 分割线 -->
    <el-divider></el-divider>
    <!-- 用户评论的内容 -->
    <template v-if="comment.length<=0?false:true">
      <el-row style="margin-top:20px" v-for="(item,index) in comment" :key="index">
        <el-col :span="6">
          <div class="user">{{item.userName}}:</div>
        </el-col>
        <el-col :span="14">
          <div class="name" >{{item.commentContent}}</div>
        </el-col>
        <el-col :span="4">
          <div class="name">
            <el-button
              type="primary"
              size="small"
              @click="shield(item)"
            >{{item.commentStatus==1?'屏蔽':'已禁用'}}</el-button>
          </div>
        </el-col>
      </el-row>
      <div class="currentpages">
        <el-pagination
          layout="prev, pager, next"
          :total="commentTotal"
          :page-size="10"
          @current-change="handleCurrentChange"
          @size-change="handleSizeChange"
        ></el-pagination>
      </div>
    </template>
    <!-- <template v-if="comment.length<=0?true:false">
      <span style="text-align: center;">没有更多</span>
    </template>-->
  </div>
</template>

<script>
export default {
  props: {
    merchant: Boolean,
    userMessage: Object,
    comment: Array,
    commentTotal: Number
  },
  data() {
    return {};
  },
  methods: {
    handleCurrentChange(val) {
      this.$emit("currentpage", val);
      console.log("分页", this.commentTotal);
    },
    // 每页多少
    handleSizeChange(val) {
      console.log("每页多少", val);
    },
    // 屏蔽
    shield(val) {
      this.$emit("commentshield", val);
      console.log(val);
    }
  }
};
</script>

<style lang="scss" scoped>
.currentpages {
  display: flex;
  justify-content: center;
  margin-top: 10px;
}
.user {
  font-weight: bold;
}
.name {
  text-align: left;
}
</style>